page {
    // background-color: aqua;
    // 搜索框
    .search_wrap {
        background-color: #C63F8F;
        display: flex;
        padding: 10rpx;
        box-sizing: border-box;
        align-items: center;

        .cell_group {
            flex: 1;
            display: flex;
            background-color: #fff;
            border-radius: 40rpx;
            height: 80rpx;
            padding: 0 20rpx;
            overflow: hidden;

            .icon {
                width: 50rpx;
                // background-color: red;
            }

            .field {
                // width: calc(100%-50rpx*2);
                flex: 1;
            }
        }

        .btn {
            // width: 100rpx;
            margin: 0 20rpx;
            font-size: 30rpx;
        }
    }

    // 搜索标签
    .label_wrap {
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 30rpx;
        box-sizing: border-box;

        .title {
            // border: 1px solid #C63F8F;
            // background-color: #F6F6F6;
            font-size: 30rpx;
            font-weight: 800;
        }

        .label {
            height: 48rpx;
            padding: 10rpx;
            font-size: 24rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #333;
            box-sizing: border-box;
            // background-color: red;
        }
    }


    // 轮播图
    .swiper_container {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        // background-color: #bfa;
        .swiper_wrapper {
            width: 90%;
            height: 650rpx;
            overflow: hidden;

            background-position: center;
            background-size: cover;
            // background-color: red;
            position: relative;


            .swiper_slider {
                width: 100%;
                height: 100%;
                border-radius: 40rpx;
                box-shadow: 2px 2px 5px #787878 inset;
                margin-bottom: 50rpx;
                // background-color: #ff6799;

                position: absolute;
                z-index: 5;
                opacity: 0.7;
                top: 7%;

                .child_detail {
                    margin: 10% 10%;
                    height: 80%;
                    display: flex;
                    flex-direction: column;

                    .picture_wrap {
                        // background-color: #ff6700;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        .picture {
                            height: 300rpx;
                        }
                    }

                    .info_wrap {

                        // background-color: #ff6799;
                        .type {
                            margin-top: 10rpx;
                            color: #C63F8F;
                            font-weight: 800;
                            font-size: 30rpx;
                        }

                        .hot {
                            display: flex;
                            align-items: center;
                            flex-wrap: wrap;

                            .title {
                                color: #333;
                                font-weight: 800;
                            }

                            .color {
                                height: 40rpx;
                                background-color: #C63F8F;
                                color: #fff;
                                border-radius: 30rpx;
                                margin-right: 20rpx;
                                font-size: 20rpx;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                padding: 20rpx;
                            }
                        }

                        .selled {
                            line-height: 1.5;
                            font-size: 24rpx;
                            color: #333;
                            margin: 10rpx 0;
                        }

                        .credit {
                            span {
                                font-size: 30rpx;
                                font-weight: 800;
                            }
                        }
                    }

                    .heart_wrap {
                        margin-top: 20rpx;
                        // background-color: #ff3456;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        .heart {
                            width: 60rpx;
                            height: 60rpx;
                        }
                    }

                }
            }

            .active {
                opacity: 1;
                z-index: 10;
                top: 0%;
                transition: all 0.2s ease-in-out 0s;
            }

        }
    }


    // 横向导航
    .label_title {
        margin-top: 80rpx;
        margin-left: 30rpx;
        font-size: 30rpx;
        color: #333;
        font-weight: 600;
        position: relative;
        // background-color: #bfa;
        display: inline-block;
    }

    .label_title::after {
        content: '';
        width: 100%;
        height: 10rpx;
        background-color: #C63F8F;
        position: absolute;
        bottom: -4rpx;
        left: 0;

    }

    .brand_wrap {
        display: flex;
        padding: 30rpx;
        // background-color: red;
        height: 200rpx;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;

        .brand {
            width: 180rpx;
            height: 180rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: rgb(243, 243, 243);
            margin-right: 20rpx;
            padding: 30rpx;
            border-radius: 30rpx;
            box-shadow: 2px 2px 5px #787878;

            .brand_trademark {
                width: 80%;
            }

            .brand_name {
                width: 160rpx;
                color: #333;
                white-space: nowrap;
                font-size: 24rpx;
                margin-top: 10rpx;
                text-align: center;
                font-weight: 600;
            }

        }

        .click {
            box-shadow: 2px 2px 5px #787878 inset;
        }
    }

    // 热门推荐内容
    .brand_content{
        width: 100%;
        height: 400rpx;
        padding: 0 20rpx;
        // background-color: aquamarine;
        .content_item{
            width: 100%;
            height: 100%;
            // background-color: #fff;
            display: flex;
            justify-content: space-between;
            .item_left{
                width: 40%;
                height: 100%;
                background-color: #fff;
                border: 1px solid #C63F8F;
                border-right: none;
                border-radius: 20rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                .hot{
                    width: 80%;
                    height: 50%;
                    image{
                        width: 100%;
                        height: 100%;
                    }
                }
                .type{
                    margin-top: 20rpx;
                    color: #333;
                }
                .color{
                    display: block;
                    background-color: #C63F8F;
                    margin-top: 20rpx;
                    padding: 10rpx;
                    border-radius: 15rpx;
                    color: #fff;
                }
            }
            .item_right{
                width: 56%;
                height: 100%;
                background-color: #F6F6F6;
                border: 1px solid #C63F8F;
                border-radius: 20rpx;
                border-left: none;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                overflow: hidden;
                .item_children{
                    width: 49%;
                    height: 49%;
                    background-color: #fff;
                    margin-bottom: 2%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    .other{
                        width: 80%;
                        height: 50%;
                        image{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .color{
                        margin-top: 15rpx;
                        background-color: #C63F8F;
                        color: #fff;
                        border-radius: 10rpx;
                        padding: 0 5rpx;
                    }
                }
            }
        }
    }
}